<template>
    <div class="max">
        <!-- 头部 -->
        <div class="top">
            <van-icon name="arrow-left" size="20" style="margin-left:8px" @click="$router.push('/minepage/mine')"/>
            <span style="font-size:18px;margin-left:33%">意见反馈</span>
        </div>
        <!-- 选择 -->
        <div class="select" @click="dj">
            <span style="margin:0 20px">反馈类型</span>
            <input type="text" placeholder="请选择" disabled style="border:none;background:white;height:100%;width:65%">
            <van-icon name="arrow" />
        </div>
        <div>
            <van-action-sheet v-model:show="show" title="反馈类型">
                <div class="content">请选择反馈类型</div>
                <van-radio-group v-model="checked">
                    <van-cell-group inset>
                        <!--  -->
                        <van-cell title="商品相关" clickable @click="checked = '1'">
                            <template #right-icon>
                                <van-radio name="1" />
                            </template>
                        </van-cell>
                        <!--  -->
                        <van-cell title="产品建议" clickable @click="checked = '2'">
                            <template #right-icon>
                                <van-radio name="2" />
                            </template>
                        </van-cell>
                        <!--  -->
                        <van-cell title="举报" clickable @click="checked = '3'">
                            <template #right-icon>
                                <van-radio name="3" />
                            </template>
                        </van-cell>
                        <!--  -->
                        <van-cell title="优惠活动" clickable @click="checked = '4'">
                            <template #right-icon>
                                <van-radio name="4" />
                            </template>
                        </van-cell>
                        <!--  -->
                        <van-cell title="功能异常" clickable @click="checked = '5'">
                            <template #right-icon>
                                <van-radio name="5" />
                            </template>
                        </van-cell>
                        <!--  -->
                        <van-cell title="其他" clickable @click="checked = '6'">
                            <template #right-icon>
                                <van-radio name="6" />
                            </template>
                        </van-cell>
                    </van-cell-group>
                </van-radio-group>
                <button class="btn" @click="sure">确定</button>
            </van-action-sheet>
        </div>
        <!-- 手机号码 -->
        <div class="num">
            <span style="margin:0 20px">手机号码</span>
            <input type="text" v-model="num" placeholder="请填写手机号码，方便我们与你联系" style="border:none;background:white;height:100%;width:65%">
            <van-icon name="close" @click="num=''"/>
        </div>
        <!-- 意见 -->
        <div class="yi">
            <input type="text" placeholder="请填写你的意见" class="inp">
        </div>
        <!-- 上传 -->
        <div class="upload">
            <p>上传图片(最多3张)</p>
            <div class="img" @click="bott=true">
                <img src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E5%8F%91%E5%B8%83%E5%B8%96%E5%AD%90/u5926.png">
                <p>上传图片</p>
            </div>
        </div>
        <van-action-sheet
        v-model:show="bott"
        :actions="actions"
        cancel-text="取消"
        close-on-click-action
        @cancel="onCancel"
        />
        <!-- 提交 -->
        <div class="bottom">
            <button class="jiao" @click="$router.push('/minepage')">提交</button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
    let show=ref(false)
    let bott=ref(false)
    let checked=ref('0')
    let num=ref('')

    const actions = [
      { name: '拍照' },
      { name: '从相册选择' },
    ];

    let dj=function(){
        show.value=true
    }
    let sure=function(){
        show.value=false;
    }
</script>

<style scoped>
        .jiao{
        width: 90%;
        height: 40px;
        border: none;
        background: #ec7b67;
        color: white;
        margin: 5px 5%;
    }
    .bottom{
        width: 100%;
        height: 50px;
        background: white;
        margin-top: 70%;
    }
    .img p{
        font-size: 12px;
        color: #d9d0cf;
    }
    .img img{
        margin-top: 10px;
    }
    .img{
        width: 25%;
        height: 80px;
        background: #f9f9f9;
        text-align: center;
        margin-top: 20px;
    }
    .upload{
        width: 100%;
        height: 150px;
        background: white;
        margin-top: 10px;
        box-sizing: border-box;
        padding: 10px;
    }
    .inp{
        width: 100%;
        border: none;
    }
    .yi{
        width: 100%;
        height: 200px;
        background: white;
        margin-top: 10px;
        box-sizing: border-box;
        padding: 10px;
    }
    .num{
        width: 100%;
        height: 50px;
        background: white;
        margin-top: 10px;
    }
    .btn{
        background: #ec7b67;
        border: none;
        color: white;
        width: 90%;
        height: 40px;
        margin-left:5%;
    }
    .select{
        width: 100%;
        height: 50px;
        line-height: 50px;
        background: white;
        margin-top: 15px;
    }
    .max{
        width: 100%;
        height: 844px;
        background: #f2f2f2;
    }
    .top{
        width: 100%;
        height: 35px;
        line-height: 35px;
        background: white   ;
    }
</style>